<template>
	<view class="cntColumn">
	
		<!-- #ifndef H5 -->
		<ttBar title="活动详情" :bgColor="titleBg" :color="wordsColor" :showZhanwei="false" titleAlign="left" :isShare="isShare">
			<template v-slot:leftCnt>
				<text class="iconfont icon-back lIcon" :style="{'background-color':btnBg}"></text>
			</template>
			<template v-slot:rightCnt>
				<text class="iconfont icon-cart rIcon" :style="{'background-color':btnBg}" @tap="toCar"></text>
				<text class="iconfont icon-home rIcon" :style="{'background-color':btnBg}" @tap="toHome"></text>
			</template>
		</ttBar>
		<!-- #endif -->
		
		<goodSwiper :swiperList="goodData.bannerList" :dotsStyles="dotsStyles" :borderRadius="0"></goodSwiper>

		<!-- 价格与标题 -->
		<goodInfo :goodData="goodData"></goodInfo>
		<!-- 课程tag -->
		<goodLabels :labels="goodData.labels" v-if="goodData.labels.length>0"></goodLabels>
		<!-- 课程保障 -->
		<goodGuarantee :protectList="goodData.protectList"></goodGuarantee>
		
		<!-- 商品评论 -->
		<goodEvaluate :cid="goodData.id" :cname="goodData.name"></goodEvaluate>
		<!-- 店铺卡片 -->
		<shop-card :shopInfo="goodData.store"></shop-card>

		<view class="htmlBox">
			<text class="parameterTitle">活动详情</text>
			<text class="dtText">{{groupDt.actDetail}}</text>
			<!-- 图文详情 -->
			<text class="parameterTitle">课程详情</text>
			<goodCnt :goodData="goodData"></goodCnt>
			<!-- 须知 -->
			<goodXuzhi :goodData="goodData"></goodXuzhi>
		</view>
		<zeroBottom :resouceData="groupDt"></zeroBottom>
		<shareAction ref="shareAction"></shareAction>
		<qrcode-poster ref="poster" :title="goodData.name.substr(0,12)" :headerImg="goodData.img" :price="goodData.price"></qrcode-poster>
	</view>
</template>


<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import goodSwiper from "@/pagesA/components/goodSwiper/goodSwiper.vue";
	import statusBar from "@/components/statusBar/statusBar.vue";
	import goodEvaluate from "@/pagesA/components/goodEvaluate/goodEvaluate.vue";
	import goodLabels from "@/pagesA/components/goodItem/goodLabels.vue";
	import goodGuarantee from "@/pagesA/components/goodItem/goodGuarantee.vue";
	import goodInfo from "@/pagesA/components/goodItem/goodInfo.vue";
	import goodCnt from "@/pagesA/components/goodItem/goodCnt.vue";
	import goodXuzhi from "@/pagesA/components/goodItem/goodXuzhi.vue";
	import zeroBottom from "@/pagesA/components/goodItem/zeroBottom.vue";
	import QrcodePoster from '../components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue';
	import shopCard from "@/pagesA/components/shopCard/shopCard.vue";
	import shareAction from "@/pagesA/components/shareAction/shareAction.vue";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		components: {
			ttBar,
			goodSwiper,
			statusBar,
			goodEvaluate,
			shopCard,
			shareAction,
			goodLabels,
			goodGuarantee,
			goodInfo,
			goodCnt,
			goodXuzhi,
			zeroBottom,
			QrcodePoster
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
				initInfo:state=>state.sys.initInfo
			})
		},
		data() {
			return {
				titleBg: 'rgba(255,255,255,0)',
				wordsColor: '#FFFFFF',
				btnBg:'rgba(0,0,0,0.5)',
				goodData: {
					name:'课程名称',
					price:0,
					labels:[]
				},
				shopInfo:{},
				dotsStyles: {
					width: 6,
					height: 4,
					bottom: -10,
					backgroundColor: '#c5c3c6',
					border: 'none',
					selectedBackgroundColor: '#ff6902',
					selectedBorder: 'none',
					borderRadius: 2
				},
				id:0,
				gid:0,
				groupDt:{
					level1:1,
					level2:2,
					level3:3,
					leftSeconds:1
				},
				isShare:0
			};
		},
		methods: {
			getData() {
				if(uni.getStorageSync("toGood")){
					this.goodData=uni.getStorageSync("toGood")
				}
				uni.showLoading({
					title:"正在加载"
				})
				this.$store.dispatch("apiGetZeroDetail",{
					id:this.gid,
					userId:this.isLogin?this.userInfo.userId:0
				}).then(res=>{
					this.groupDt=res.data.data;
					this.goodData = res.data.data.course;
					this.goodData.price=0;
					console.log(this.goodData)
					this.goodData.prepay=0;
					this.shopInfo=res.data.data.course.store;
					uni.hideLoading()
				})
			},
			toCar(){
				if (this.isLogin) {
					this.toPage("car")
				} else {
					this.toPage({
						url:'login',
						to:'car'
					})
				}
			},
			toHome(){
				this.toPage({
					url:'index'
				})
			},
			// 分享功能
			share(){
				uni.$emit("showShare",{
					type:5,		//拼团1 课程2  店铺3  活动4   零元购5
					id:this.gid
				})
				this.$refs.shareAction.open()
			},
			showPoster(){
				uni.showLoading({
				    title: '加载中...',
					mask: true
				})
				let _href='';
				if(this.isLogin){
					_href='url=zeroDetail&id=' + this.gid+'&uid='+this.userInfo.userId
				}else{
					_href='url=zeroDetail&id=' +this.gid
				}
				this.$store.dispatch("apiGetMPToken").then(res=>{
					this.$store.dispatch("apiGetMpCodeImg",{
						token:res.data.data.access_token,
						page:'pages/index/index',
						scene:_href,
						width:280
					}).then(imgRes=>{
						if(imgRes.data.code==1){
							this.$refs.poster.showCanvas(imgRes.data.data)
						}else{
							
						}
						
					})
				})
			},
			
		},
		onLoad(cfm) {
			// 监听页面返回事件
			uni.$on('update', function(data) {
				console.log(data);
			})
			this.gid=cfm.id;
			this.isShare=cfm.isShare?parseInt(cfm.isShare):0
			this.getData();
			

		},
		onShow(){
			this.getData();
		},
		onUnload() {

		},
		onShareAppMessage(res) {
			let _href='';
			if(this.isLogin){
				_href='pages/index/index?url=zeroDetail&id=' + this.gid+'&uid='+this.userInfo.userId
			}else{
				_href='pages/index/index?url=zeroDetail&id=' +this.gid
			}
			return {
				title: '大牌好课0元抢 '+this.goodData.name,
				path: _href,
				imageUrl:this.goodData.img
			}
		},
		onPageScroll(e) {
			var _this = this;
			if (e.scrollTop > this.videoHeight) {
				this.titleBg = 'rgba(255,255,255,1)';
				this.wordsColor = "#000000";
				this.btnBg="rgba(255,255,255,1)";
			} else {
				this.titleBg = 'rgba(255,255,255,0)';
				this.wordsColor = "#FFFFFF";
				this.btnBg="rgba(0,0,0,0.5)";
			}
			uni.$on("loginNext",()=>{
				
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F4F4F4;
	}
	.cntColumn{
		display: flex;
		flex-direction: column;
	}
	/* #ifdef MP */
	.titleBg {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;

	}

	.goodTitle {
		position: fixed;
		width: 100%;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		left: 0;
		padding-right: 28%;
		box-sizing: border-box;
		font-size: 36upx;
	}

	.backBtn {
		position: fixed;
		width: 60upx;
		height: 60upx;
		margin-top: 16upx;
		left: 28upx;
	}

	.carBtn {
		position: fixed;
		width: 60upx;
		height: 60upx;
		margin-top: 16upx;
		right: 28%;
	}

	/* #endif */


	.mainCnt {
		padding: 0 28upx;
	}
	.groupInfo{
		background:linear-gradient(to right,#fa3074,#f86266);
		display: flex;
		flex-direction: column;
		color: #FFFFFF;
		padding-bottom: 20upx;
		.priceBox{
			display: flex;
			padding: 10upx 20upx 10upx 40upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.price{
				font-size: 56upx;
				font-weight: bold;
			}
			.price:first-letter{
				font-size: 40upx;
			}
			.djs{
				font-size: 26upx;
				background-color: rgba(0,0,0,0.2);
				height: 40upx;
				border-radius: 20upx;
				line-height: 40upx;
				padding: 0 30upx;
				text:first-child{
					margin-right: 10upx;
				}
			}
		}
		.fanli{
			display: flex;
			padding: 0upx 80upx;
			>text{
				flex-shrink: 0;
				font-size: 28upx;
				font-weight: bold;
				margin-right: 20upx;
			}
			.fanliBox{
				display: flex;
				flex-direction: column;
				font-size: 28upx;
			}
		}
	}
	
	.ruleBox{
		display: flex;
		background-color: #FFFFFF;
		padding: 20upx 28upx;
		border-bottom: 13upx solid #f4f4f4;
		font-size: 32upx;
		align-items: center;
		.title{
			font-size: 30rpx;
			color: #2c2c2c;
			margin-right: 30upx;
		}
		.ruleText{
			font-size: 24upx;
			flex-grow: 1;
			text-align: right;
			color: #f93d3d;
		}
	}



	.htmlBox {
		padding: 18upx 28upx 180upx 28upx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		.parameterTitle {
			font-size: 32rpx;
			font-weight: bold;
			color: #202932;
		}
		.dtText{
			margin-bottom: 20upx;
			font-size: 32upx;
			color: #202932;
		}
	}
	
	
	.icon-gouwuche{
		font-size: 48upx;
	}
	.rIcon{
		font-size: 44upx;
		font-weight: normal;
		margin-left: 20upx;
		width: 70upx;
		height: 70upx;
		background-color: rgba(0,0,0,0.5);
		text-align: center;
		line-height: 70upx;
		border-radius: 50%;
		
	}
	.lIcon{
		font-size: 44upx;
		font-weight: normal;
		width: 70upx;
		height: 70upx;
		background-color: rgba(0,0,0,0.5);
		text-align: center;
		line-height: 70upx;
		border-radius: 50%;
	}
</style>
